<!-- 
  作者：于千荷,
  描述：考勤页面+打卡页面,
  修改人：于千荷
 -->
<template>
  <hr class="langHr" />
  <hr class="shortHr" />
  <div class="taskBody">
    <div class="footer">
      <!-- 头部日期选项栏 -->
      <div class="block2">
        <el-date-picker
          v-model="value2"
          type="date"
          placeholder="查询日期"
          :default-value="new Date(2010, 9, 1)"
        />
      </div>
      <div class="blockTask">
        <el-cascader :options="entryname" placeholder="项目名称" />
      </div>
      <div class="attendance">
        <el-cascader :options="options" placeholder="考勤情况" />
      </div>
      <div class="selctBtn">
        <el-button type="primary" color="#3E94AD">查询</el-button>
      </div>
      <div class="startBtn"><el-button>重置</el-button></div>
    </div>

    <!-- 选项卡1：考勤记录 -->
    <el-tabs
      v-model="activeName"
      type="card"
      class="demo-tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane label="考勤记录" name="first">
        <el-table
          :data="tableData"
          style="width: 100%; height: 300px"
          :header-cell-style="{ textAlign: 'center', background: '#c2dae2' }"
          :cell-style="{ textAlign: 'center' }"
          stripe="true"
          
          
          @selection-change="handleSelectionChange"
        >
          <!-- 表头 -->
          <el-table-column prop="date" label="日期" width="180" />
          <el-table-column prop="code" label="学号" width="180" />
          <el-table-column prop="name" label="项目名称" width="180" />
          <el-table-column prop="teacher" label="实训老师" width="180" />
          <el-table-column prop="teacher02" label="责任老师" width="180" />
          <el-table-column prop="complete" label="考勤完成情况" width="180" />
          <el-table-column prop="operation" label="操作">
            <el-button
              @click="jumpDetailsPage"
              type="primary"
              icon="el-icon-edit"
              size="small"
              class="operate"
              >详情</el-button
            >
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div>
          <el-pagination
            class="dataFen"
            :page-size="1"
            :hide-on-single-page="value"
            :total="3"
            layout="prev, pager, next"
          />
        </div>
        <!-- 弹窗 -->
        <div class="el-overlay is-message-box" v-if="pageShow02">
          <div class="addpage">
            <details-page @closeclick02="closeclick02"></details-page>
          </div>
        </div>
      </el-tab-pane>
      <!-- 选项卡2：打卡记录 -->
      <el-tab-pane label="打卡记录" name="second">
        <el-table
          :data="tableData"
          style="width: 100%; height: 280px"
          :header-cell-style="{ textAlign: 'center', background: '#c2dae2' }"
          :cell-style="{ textAlign: 'center' }"
          stripe="true"
        >
          <!-- 表单 -->
          <el-table-column prop="date" label="日期" width="240" />
          <el-table-column prop="code" label="学号" width="240" />
          <el-table-column prop="name" label="姓名" width="240" />
          <el-table-column prop="cardtime" label="打卡时间" width="240" />
          <el-table-column prop="equipment" label="打卡设备" width="240" />
        </el-table>
        <!-- 分页 -->
        <div>
          <el-pagination
            class="dataFen"
            :page-size="1"
            :hide-on-single-page="value"
            :total="3"
            layout="prev, pager, next"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import DetailsPage from "./DetailsPage.vue";
export default {
  name: "AttendanceView",
  components: {
    DetailsPage,
  },
  setup() {
    const value2 = ref("");
    //两个下拉选框
    const entryname = [
      {
        value: "consistency",
        label: "考勤系统",
      },
      {
        value: "feedback",
        label: "购票系统",
      },
    ];
    const options = [
      {
        value: "consistency",
        label: "迟到",
      },
      {
        value: "feedback",
        label: "正常",
      },
      {
        value: "feedback02",
        label: "早退",
      },
    ];
    //斑马纹的组件
    const tableRowClassName = (number) => {
      if (number / 2 != 0) {
        return "success-row";
      } else {
        return "warning-row";
      }
    };
    //选项卡组件
    const activeName = ref("first");
    const handleClick = (TabsPaneContext, Event) => {
      console.log(TabsPaneContext, Event);
    };
    //传入数据 每{}为一条传入对象
    const tableData = [
      {
        date: "2016-05-03 00:01",
        code: "199000001",
        name: "在线商城系统",
        teacher: "李老师",
        teacher02: "李老师",
        complete: "完成",
        operation: "具体操作",
        cardtime: "2016-05-03 00:01",
        equipment: "手机",
      },
      {
        date: "2016-05-03 00:01",
        code: "199000001",
        name: "在线商城系统",
        teacher: "李老师",
        teacher02: "李老师",
        complete: "完成",
        operation: "具体操作",
        cardtime: "2016-05-03 00:01",
        equipment: "手机",
      },
      {
        date: "2016-05-03 00:01",
        code: "199000001",
        name: "在线商城系统",
        teacher: "李老师",
        teacher02: "李老师",
        complete: "完成",
        operation: "具体操作",
        cardtime: "2016-05-03 00:01",
        equipment: "手机",
      },
      {
        date: "2016-05-03 00:01",
        code: "199000001",
        name: "在线商城系统",
        teacher: "李老师",
        teacher02: "李老师",
        complete: "完成",
        operation: "具体操作",
        cardtime: "2016-05-03 00:01",
        equipment: "手机",
      },
      {
        date: "2016-05-03 00:01",
        code: "199000001",
        name: "在线商城系统",
        teacher: "李老师",
        teacher02: "李老师",
        complete: "完成",
        operation: "具体操作",
        cardtime: "2016-05-03 00:01",
        equipment: "手机",
      },
      {
        date: "2016-05-03 00:01",
        code: "199000001",
        name: "在线商城系统",
        teacher: "李老师",
        teacher02: "李老师",
        complete: "完成",
        operation: "具体操作",
        cardtime: "2016-05-03 00:01",
        equipment: "手机",
      },
      {
        date: "2016-05-03 00:01",
        code: "199000001",
        name: "在线商城系统",
        teacher: "李老师",
        teacher02: "李老师",
        complete: "完成",
        operation: "具体操作",
        cardtime: "2016-05-03 00:01",
        equipment: "手机",
      },
      {
        date: "2016-05-03 00:01",
        code: "199000001",
        name: "在线商城系统",
        teacher: "李老师",
        teacher02: "李老师",
        complete: "完成",
        operation: "具体操作",
        cardtime: "2016-05-03 00:01",
        equipment: "手机",
      },
    ];
    //弹窗组件
    let pageShow02 = ref(false);
    function jumpDetailsPage() {
      pageShow02.value = true;
    }
    function closeclick02(isclose) {
      if (isclose == false) {
        pageShow02.value = false;
      }
    }
    //返回数据
    return {
      value2,
      options,
      entryname,
      tableData,
      handleClick,
      activeName,
      tableRowClassName,
      jumpDetailsPage,
      closeclick02,
      pageShow02,
    };
  },
};
</script>



<style lang="less" scoped>
/* 表单斑马纹 */
::v-deep .el-table .el-table__body tr.el-table__row td {
  background: rgb(194 218 226);
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgb(194, 218, 226);
}
// 头部横线
.langHr {
  margin: 0 60px;
  border: 1px solid rgb(194, 218, 226);
  margin-top: 90px;
  background-color: rgb(194, 218, 226);
}
.shortHr {
  margin-left: 60px;
  width: 200px;
  border: 4px solid rgb(62, 148, 173);
  margin-top: -4px;
  border-radius: 20px;
  background-color: rgb(62, 148, 173);
}
/* 整体组件样式 */
.taskBody {
  width: 1200px;
  margin-top: 50px;
  margin-left: 50px;
}

/* 引入的footer组件样式 */
.footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.blockTask {
  margin-left: 20px;
  width: 165px;
}

.attendance {
  margin-left: 20px;
  width: 125px;
}
.selctBtn {
  margin-left: 20px;
}
.startBtn {
  margin-left: 20px;
}
/* 引入的footer组件样式 end*/
/* 操作列内按钮样式 */
.operate {
  width: 40px;
  height: 25px;
  /* background: #077498; */
  color: rgb(219, 238, 254);
  font-size: 5px;
  align-items: center;
  text-align: center;
}
/* 分页组件所摆放的位置 */
.dataFen {
  margin-left: 500px;
  margin-top: 50px;
}
// 弹窗组件样式
.content {
  @font-face {
    font-family: kaiti;
    src: url("@/assets/fontStyle/方正楷体_GBK.TTF");
  }
  width: 800px;
  // border: 1px #999 solid;
  margin-left: 60px;
  margin-top: 20px;
  .cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .card {
      margin-top: 20px;
      position: relative;
      background-color: white;
      // display: flex;
      height: 100px;
      width: 350px;
      border-radius: 20px;
      box-shadow: 19px 1px 20px rgb(219, 214, 214);
      .carsColor {
        display: inline-block;
        position: absolute;
        top: 15px;
        left: 30px;
        width: 70px;
        height: 70px;
        background-color: aquamarine;
        border-radius: 20px;
      }
      .teamName {
        position: absolute;
        top: 15px;
        left: 130px;
        font-size: 18px;
        // font-family: Microsoft YaHei;
      }
      .leader {
        position: absolute;
        top: 55px;
        left: 130px;
      }
      img {
        width: 18px;
        height: 18px;
        position: absolute;
        right: 30px;
        top: 10px;
        cursor: pointer;
      }
    }
  }
  #customerChart {
    width: 400px;
    height: 350px;
    // border: #3e94ad 1px solid;
    margin-left: 800px;
    margin-top: -345px;
    background-color: rgba(249, 251, 252, 60%);
    border-radius: 30px;
  }
}
</style>
